<template>
	<view class="evaluate">
		<view v-if="form" class="evaluate-item mb20">
			<view v-if="form.admin" class="evaluate-item-header flex">
				<u--image v-if="form.admin.avatar" :showLoading="true" :src="form.admin.avatar[0].url" width="80rpx" height="80rpx"
					radius="10rpx" />
				<view class="flex fs14 ml5" style="color: #606266">
					<text>{{ form.admin.userName || '未命名店铺' }}</text>
				</view>
			</view>
			<u-line />
			<view class="evaluate-item-content" style="color: #606266">
				<u--image v-if="form.iconId" :showLoading="true" :src="form.iconId[0].url" width="100rpx" height="100rpx" radius="10rpx" />
				<view class="evaluate-item-content-right ml10">
					<text class="u-line-3 fs14">{{ form.name || '未命名商品' }}</text>
				</view>
			</view>
		</view>
		<view class="evaluate-rate flex mb20">
			<text class="fs14" style="color: #606266;">商品评分：</text>
			<u-rate :count="5" v-model="evaluateOrder.count" size="48rpx" />
		</view>
		<view class="evaluate-rate mb20">
			<u--textarea v-model="evaluateOrder.description" placeholder="请输入评价内容" height="120" count border="none" />
		</view>
		<view class="evaluate-menu">
			<u-button text="提交评价" iconColor="#fff" @click="submitRate" />
		</view>
	</view>
</template>

<script>
	import setSkuData from "@/utils/set_Sku_data.js";
	export default {
		mixins: [setSkuData],
		data() {
			return {
				form: {}, // 商品数据
				evaluateOrder: {
					adminId: '', // 店铺id
					goodsId: '', // 商品id
					orderId: '', // 订单编号
					count: 0, // 评价星数
					description: '' // 评价内容
				}
			}
		},
		onShow() {
			const routes = getCurrentPages()
			this.evaluateOrder.adminId = routes[routes.length - 1]?.options?.adminId
			this.evaluateOrder.orderId = routes[routes.length - 1]?.options?.orderId
			this.evaluateOrder.goodsId = routes[routes.length - 1]?.options?.goodsId
			this.getList()
		},
		methods: {
			// 提交评价
			async submitRate() {
				if (!this.evaluateOrder.count || !this.evaluateOrder.description) {
					this.showToast('请输入内容再提交')
				}
				const { code } = await this.$comment.commentAdd(this.evaluateOrder)
				if (code === 0) {
					this.showToast('提交成功')
					uni.redirectTo({
						url: `/pages/order/index?orderStatus=DPJ`,
						animationType: 'pop-in',
						animationDuration: 200
					})
				}
				
			},
			// 初始化获取商品信息
			async getList() {
				if (!this.evaluateOrder.goodsId || !this.evaluateOrder.adminId || !this.evaluateOrder.orderId) {
					this.showToast('打开页面出错，请返回充重试')
					return
				}
				const {
					code: goods_code,
					data: goods_data
				} = await this.$goods.goodsGoodDetails({
					id: this.evaluateOrder.goodsId
				})
				const {
					code: admin_code,
					data: admin_data
				} = await this.$adminUser.adminUserGetDetails({
					adminId: this.evaluateOrder.adminId
				})
				if (goods_code === 0 && admin_code === 0) {
					goods_data['admin'] = admin_data
					this.form = goods_data
					console.log(this.form, '商品数据')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluate {
		padding: 20rpx;

		&-item {
			background-color: #fff;
			border-radius: 8rpx;
			padding: 5rpx 10rpx;

			&-content {
				padding: 10rpx 0;
				display: flex;

				&-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&-sku {
						background-color: rgba(0, 0, 0, .15);
						width: fit-content;
						padding: 4rpx 8rpx;
					}
				}
			}
		}
		&-rate{
			background-color: #fff;
			border-radius: 8rpx;
			padding: 15rpx 20rpx;
		}
		&-menu{
			/deep/ .u-button {
				background-color: $uni-color-primary;
				color: #fff;
			}
		}
	}
</style>
